<template>
  <h1>父组件</h1>
  <p>{{ money }}</p>
  <hr />
  <Son :money="money" :age="18" sex="男">
    <!-- 默认插槽 -->
    <h2>Hello World</h2>
    <!-- 具名插槽 -->
    <template #title>
      <div>标题</div>
    </template>
    <!-- 作用域插槽：父组件可以使用子组件的数据，加工处理之后再传给子组件 -->
    <template #footer="scope">
      <div>
        标题: <strong>{{ scope.info.name }}</strong>
      </div>
    </template>
  </Son>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {
  name: 'App',
  components: {
    Son,
  },
  setup() {
    const money = ref(100)

    return { money }
  },
}
</script>
